<template>
  <div>
    <Form :label-width="75">
      <Row :gutter="20" class="code-row-bg" v-for="item in items" :key="item.langCode">
        <Col span="24">
          <Form-item :label="item.langDesc">
            <Input
              v-model.trim="langData[item.langCode]"
              type="textarea"
              :rows="4"
              
              :maxlength="30"
            />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import { CoreModuleName } from "@/const";
import { getMenuLang, setManuAndLang } from "@api/menuAPI.js";
import locales from "../locales.js";

export default {
  name: "menuedit",
  mixins: [locales],
  props: {
    oriData: Object
  },
  data() {
    return {
      items: $store.state[CoreModuleName].supportedLanguages,
      langData: Object.assign({}, this.oriData)
    };
  },
  created: function() {
    this.$emit("SetPageWidth", 500);
    this.$emit("SetTitle", this.$t("module.errCenter.modifyLanguages"));
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.save"),
        theme: "primary",
        icon: "edit",
        action: "SetManuLAng",
        handle: this.updateLangConfig
      },
      {
        text: this.$t("common.close"),
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
  },
  methods: {
    updateLangConfig() {
      this.$emit("Close", this.langData);
    }
  }
  // watch: {},
  // directives: {}
};
</script>
